<template>
	<div class="form">
		<div class="capital">
			<div class="money">
				<p>代理编号：<span>{{proxyId}}</span></p>
				<p>
					<img src="../../assets/images/u1311.png"/>
					余额：￥<span>{{balance}}</span>
				</p>
			</div>
			<div class="btnBox">
				<p><el-button type="danger" @click='withdraw'>提现</el-button></p>
			</div>
		</div>
		<div>						
			<p>
				状态：
				<el-select v-model="filterData.status" placeholder="请选择">
					<el-option v-for="item in statusSelect" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</p>&nbsp;&nbsp;&nbsp;&nbsp;
			<p>
				提现时间：
				<el-date-picker v-model="filterData.dates" type="datetimerange"
			      	:default-time="['12:00:00', '23:59:59']" align="right" 
					unlink-panels range-separator="至" start-placeholder="开始日期" 
					end-placeholder="结束日期" :picker-options="pickerOptions2" 
					value-format='timestamp'>
				</el-date-picker>
			</p>					
			<p style='margin-bottom: 20px;'>
				<el-button type="info" @click='query'>查询</el-button>
				<el-button type="info" @click='reset'>重置</el-button>
			</p>
			<el-table border :data="tableData" style="width: 100%">
				<el-table-column type="index"width="50" label="序号" >					
				</el-table-column>
				<el-table-column prop="id" label="代理ID">
				</el-table-column>
				<el-table-column prop="amount" label="金额">
				</el-table-column>
				<el-table-column prop="kind" label="提现类型" :formatter="formKind">
				</el-table-column>						
				<el-table-column prop="status" label="交易状态" :formatter="formStatus">
				</el-table-column>
				<el-table-column prop="createTime" label="提现时间">
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
			   :current-page="filterData.current" :current-page.sync="filterData.current" 
			   :page-sizes="[10, 15, 20, 30]" :page-size="filterData.size" 
			   layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
			<el-dialog title="充值提现" :visible.sync="centerDialogVisible" width="35%" center>
				<div class="dialog">
					<el-form ref="ruleForm" :model="ruleForm" :rules="rules" auto-complete="on" label-position="left">
						<p>
							<el-form-item prop='alipayName' label='支付宝真实名字'>
								<el-input v-model="ruleForm.alipayName" placeholder="支付宝真实名字"></el-input>
							</el-form-item>
						</p>
						<p>
							<el-form-item prop='alipayNum' label='支付宝账号'>
								<el-input v-model="ruleForm.alipayNum" placeholder="支付宝账号"></el-input>
							</el-form-item>
						</p>
						<p>
							<el-form-item prop='totalFee' label='金额'>
								<el-input-number v-model="ruleForm.totalFee" :precision="2" :step="1" :min='200'></el-input-number>
							</el-form-item>
						</p>
						<p>
							<el-button type="primary" @click='withdrawSure'>确认提现</el-button>
						</p>
					</el-form>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script type="text/javascript">
	import {financeInfo,financePage,financeWithdraw,pickerOptions2,formatter} from "@/api/common"
	export default {
		created(){
			this.query();
			this.queryInfo();
		},
		methods: {
			handleSizeChange(val) {
				this.filterData.size = val;
				this.query();
			},
			handleCurrentChange(val) {
				this.filterData.current = val;
				this.query();
			},
			formStatus(row, column){		
				return(formatter(row.status,this.statusSelect))
			},
			formKind(){
				return(formatter(row.kind,this.kindSelect))
			},
			withdraw(){
				this.centerDialogVisible = true;
			},
			withdrawSure(){
				console.log(this.ruleForm)
				this.$refs.ruleForm.validate(valid => {
					if(valid){
						financeWithdraw(this.ruleForm).then(res =>{
							this.$message.success(res.msg)
						}).catch(res =>{
							this.$message.error(res.msg)
						})
					}
				})
			},
			query(){
				financePage(this.filterData).then(res =>{
					console.log(res)
					this.tableData = res.data.records;
				}).catch(res =>{
					this.$message.error(res.msg)
				})
			},
			queryInfo(){
				financeInfo(this.filterData).then(res =>{
					console.log(res)
					this.proxyId = res.data.proxyId;
					this.balance = res.data.balance;
				}).catch(res =>{
					this.$message.error(res.msg)
				})
			},
			reset(){
				this.filterData = {					 
					dates:[],	
					status:null,
					current:1,
					size:10,
				},
				this.query();
			},
		},
		data() {
			return {
				proxyId:null,					//代理id
				balance:null,					//余额
				filterData: {					 
					dates:[],	
					status:null,
					current:1,
					size:10,
				},
				tableData: [],					//主列表数据
				ruleForm:{						//充值提现操作数据
					totalFee:200,			//支付金额
					alipayNum:'',			//支付宝账号
					alipayName:'',			//支付宝名称
				},		
				rules:{
					totalFee: [
            			{ type: 'number',required: true, message: '请输入数字金额', trigger: 'blur' }
          			],
          			alipayNum: [
            			{ type: 'string',required: true, message: '请输入支付宝名字', trigger: 'blur' }
          			],
          			alipayName: [
            			{ type: 'string',required: true, message: '请输入支付宝账号', trigger: 'blur' }
          			],
				},
				centerDialogVisible:false,

				statusSelect: [{ 			//提现状态状态下拉框
					value: 0,
					label: '审核中'
				}, {
					value: 1,
					label: '审核通过'
				}, {
					value: 2,
					label: '审核不通过'
				}],	
				kindSelect: [{
					value: 0,
					label: '支付宝'
				}, {
					value: 1,
					label: '微信'
				}],
				pickerOptions2: pickerOptions2,
				total:null,
			}
		}
	}
</script>

<style scoped="scoped">
	.form .moneyNumInput {
		width: 200px;
		margin-bottom: 20px;
	}
	
	.form p {
		display: inline-block;
		padding: 0;
		margin: 0;
	}
	
	.capital{
		border: 1px solid #ddd;	
		margin: 20px auto;
		overflow: hidden;
		width:500px;
	}
	
	.money {
		float: left;		
	}
	.btnBox {
		float: right;		
		margin-top: 40px;
	}
	.money img{
		width:50px;
		vertical-align: bottom;
	}
	.btnBox {
		line-height: 100%;
		text-align: center;
	}
	.money p{
		display: block;
		padding:20px
	}
	.btnBox p{
		display: block;
		padding:20px
	}
	.el-dialog__body {
		text-align: center;
	}
	.el-dialog__body img {
		width:100%
	}
	
	.dialog p {
		display: block;
	}
	.scanSuccess {
		font-size: 30px;
		font-weight: bold;
		text-align: center;
	}
	.el-date-editor {
		margin-bottom:20px
	}
</style>